import { memo, useEffect, useState } from "react";
import {
  Steps,
  Space,
  Tag,
  Card,
  Grid,
  Image,
  Button,
  Toast,
  Modal,
} from "antd-mobile";
import dayjs from "dayjs";
import axios from "axios";
import style from "./index.module.less";
import { DAY_FORMAT, SCHEDULE_STATUS } from "../../utils/constants";
import { ROUTE_KEY } from "@/routes/menu";
import { useGoTo } from "@/hooks";

const { Step } = Steps;

export const MyCourse = () => {
  // 个人预约的课程列表状态
  // const SCHEDULE_STATUS = {
  //   NO_DO: ['NO_DO', 'primary', '未开始'], // 未开始
  //   NOING: ['DOING', 'success', '上课中'], // 正在上课中
  //   FINISH: ['FINISH', 'default', '下课了'], // 上完课了
  //   COMMENTED: ['COMMENTED', 'warning', '已评价'], // 已评价
  //   CANCEL: ['CANCEL', 'danger', '已取消'], // 已取消
  // };
  // 单个 个人的预约课程类型
  interface courseListType {
    id: string;
    org: {
      logo: string;
      id: string;
    };
    schedule: {
      schoolDay: string;
      startTime: string;
      endTime: string;
      teacher: {
        name: string;
      };
    };
    status: string;
    courseImg: {
      coverUrl: string;
    };
    course: {
      name: string;
    };
    time: string;
  }
  // 我的课程列表
  const [courseList, setCourseList] = useState([
    // {
    //   id: "1",
    //   time: "2023-10-28 12:00:00 - 16:30:00",
    //   status: "NO_DO",
    //   courseImg: {
    //     coverUrl: "/public/avatar.jpg",
    //   },
    //   schedule: {
    //     schoolDay: new Date(),
    //     startTime: "19:00:00",
    //     endTime: "21:00:00",
    //     teacher: {
    //       name: "王小龙",
    //     },
    //   },
    //   org: {
    //     id: 1,
    //     logo: "/public/avatar.jpg",
    //   },
    //   course: {
    //     name: "水彩画初学者课程",
    //   },
    // },
    // {
    //   id: "2",
    //   time: "2023-10-27 14:00:00 - 17:30:00",
    //   status: "NOING",
    //   courseImg: {
    //     coverUrl: "/public/avatar.jpg",
    //   },
    //   schedule: {
    //     schoolDay: new Date(),
    //     startTime: "19:00:00",
    //     endTime: "21:00:00",
    //     teacher: {
    //       name: "郑晓龙",
    //     },
    //   },
    //   org: {
    //     id: 2,
    //     logo: "/public/avatar.jpg",
    //   },
    //   course: {
    //     name: "素描初学者课程",
    //   },
    // }
  ]);
  // 获取我的课程列表
  const getCourseList = async () => {
    const {
      data: { data },
    } = await axios.get(
      `http://127.0.0.1:3000/getScheduleRecords?Id=${localStorage.getItem(
        "StudentID"
      )}`
    );
    setCourseList(data);
  };

  useEffect(() => {
    getCourseList();
  }, []);

  const { go } = useGoTo();
  // const loading = useState('1');

  // if (loading) {
  //   return <DotLoading />;
  // }

  // 取消预约的课程，必须是未开始的课程才能取消
  const cancelSubscribeHandler = async (id: string) => {
    const result = await Modal.confirm({
      content: "确定要取消预约吗？一旦取消不能重复预约了",
    });
    interface ResUpdateSchedule {
      code: number;
      message: string;
    }
    interface ResUpdateScheduleRecordStatus{
      data: ResUpdateSchedule
    }
    if (result) {
      // 修改数据状态
      const result: ResUpdateScheduleRecordStatus = await axios.post(
        `http://127.0.0.1:3000/updateScheduleRecordStatus?id=${id}`
      );
      if (result.data.code === 200) {
        Toast.show({
          content: result.data.message,
        });
        const {
          data: { data },
        } = await axios.get(
          `http://127.0.0.1:3000/getScheduleRecords?Id=${localStorage.getItem(
            "StudentID"
          )}`
        );
        setCourseList(data);
        return;
      }
      Toast.show({
        content: result.data.message,
      });
    }
  };

  return (
    <div className={style.container}>
      <Steps direction="vertical">
        {courseList?.map((item: courseListType) => (
        
          <Step
            key={item.id}
            icon={
              <img
                src={item.org?.logo}
                alt="logo"
                className={style.logo}
                onClick={() =>
                  go(ROUTE_KEY.ORG_INFO, {
                    id: item.org.id,
                  })
                }
              />
            }
            title={
              <Space justify="between" block>
                <span>
                  {dayjs(item.schedule.schoolDay).format(DAY_FORMAT)}
                  &nbsp;
                  {item.schedule.startTime}-{item.schedule.endTime}
                </span>
                <Tag color={ SCHEDULE_STATUS[(item.status as 'NO_DO' || 'NOING' || 'FINISH' || 'COMMENTED' || 'CANCEL')][1]  }>
                  { SCHEDULE_STATUS[(item.status as 'NO_DO' || 'NOING' || 'FINISH' || 'COMMENTED' || 'CANCEL')][2] }
                </Tag>
              </Space>
            }
            description={
              <Card>
                <Grid columns={13} gap={10}>
                  <Grid.Item span={4}>
                    <Image
                      src={item.courseImg.coverUrl}
                      className={style.coverUrl}
                    />
                  </Grid.Item>
                  <Grid.Item span={6}>
                    <div className={style.name}>{item.course.name}</div>
                    <div className={style.teacher}>
                      老师:
                      {item.schedule.teacher?.name}
                    </div>
                  </Grid.Item>
                  <Grid.Item span={3}>
                    {SCHEDULE_STATUS.NO_DO[0] === item.status && (
                      <Button
                        fill="none"
                        color="primary"
                        onClick={() => cancelSubscribeHandler(item.id)}
                      >
                        取消
                      </Button>
                    )}
                  </Grid.Item>
                </Grid>
              </Card>
            }
          />
        ))}
      </Steps>
    </div>
  );
};

export default memo(MyCourse);
